{% extends "layout.html" %}
{% block title %}天气数据分析 - 气象数据可视化平台{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="/static/css/analysis_view.css">
{% endblock %}
{% block content %}
<div class="container main-content">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="dashboard-title">
                <i class="fas fa-chart-line me-2 text-info"></i>天气数据分析
            </h1>
        </div>
        <div>
            <div class="text-end">
                <span class="badge bg-info text-white me-2">
                    <i class="fas fa-microchip me-1"></i>数据分析
                </span>
            </div>
            <div class="text-end">
                <span class="badge bg-secondary text-white">
                    <i class="fas fa-brain me-1"></i>趋势分析
                </span>
            </div>
        </div>
    </div>

    <!-- 城市选择 -->
    <div class="filter-box card shadow-sm mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-10">
                    <div class="d-flex justify-content-flex-start align-items-center">
                        <div class="col-md-4 me-3">
                            <select id="provinceSelect" class="form-select">
                                <option value="">请选择省份</option>
                            </select>
                        </div>
                        <div class="col-md-4 me-3">
                            <select id="citySelect" class="form-select" disabled>
                                <option value="">请先选择省份</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 text-end">
                    <button onclick="loadAnalysis()" class="btn" style="background-color: #2243b6; border-color: #003366; color: white;">
                        <i class="fas fa-chart-bar me-2"></i>开始分析
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="loader text-center" id="loader" style="display: none;">
        <div class="spinner-border text-info" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-3 text-muted">正在分析数据...</p>
    </div>

    <!-- 分析结果展示区域 -->
    <div id="analysis-results" style="display: none;">
        <!-- 温度趋势分析 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h5 class="m-0"><i class="fas fa-temperature-high me-2 text-danger"></i>温度趋势分析</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="chart-container" id="temperatureTrendChart"></div>
                    </div>
                    <div class="col-md-4">
                        <div class="analysis-summary">
                            <h6>趋势摘要</h6>
                            <div id="trendSummary"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 季节性分析 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h5 class="m-0"><i class="fas fa-calendar-alt me-2 text-success"></i>季节性分析</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="chart-container" id="seasonalPatternChart"></div>
                    </div>
                    <div class="col-md-4">
                        <div class="analysis-summary">
                            <h6>季节特征</h6>
                            <div id="seasonalSummary"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 异常天气事件 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h5 class="m-0"><i class="fas fa-exclamation-triangle me-2 text-warning"></i>异常天气事件</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="anomaliesTable">
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>最高温度</th>
                                <th>最低温度</th>
                                <th>异常类型</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 天气模式分析 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h5 class="m-0"><i class="fas fa-cloud-sun me-2 text-info"></i>天气模式分析</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="chart-container" id="tempRangeChart"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-container" id="changeFrequencyChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/analysis_view.js"></script>
{% endblock %} 